import React, { useState, useEffect } from "react";
import { Input, Switch, Modal, Upload, Form, message } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { baseUrl } from "../../../../../api/lf";
interface propsType {
    cheInfo: Data | null
}
/* 商品详情 */
interface Data {
    key: React.Key;
    goodsId: string;//商品序号
    goodsImg: string;//商品图片
    goodsName: string;//商品名字
    goodsSerNum: number;//商品货号
    goodsPriceRange: string;//商品价格区间
    categoryName: string;//类别
    brandName: string;//品牌名
    goodsBrandId: number;//品牌id
    goodsStatus: string;//是否上架
    goodsSell: string;//销量

}
export default function Check(props: propsType) {
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();

    useEffect(() => {
        /* checkGoodInfo() */
        setImageUrl(baseUrl + props.cheInfo?.goodsImg)
    }, [])
    console.log('props', props.cheInfo);
    //通过商品ID查看商品信息
    /*  function checkGoodInfo() {
         getGoodInfo({ id: props.cheInfo }).then(res => {
             console.log('商品信息', res);
 
         }).catch(err => [
             console.log('请求失败', err)
 
         ])
     }
  */





    const getBase64 = (img: RcFile, callback: (url: string) => void) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result as string));
        reader.readAsDataURL(img);
    };

    const beforeUpload = (file: RcFile) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
    };



    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );

    return <div>
        {/* 编辑弹框 */}

        <Form  >
            <Form.Item label="序号"
            >

                <Input disabled defaultValue={props.cheInfo?.goodsId} />
            </Form.Item>
            <Form.Item label="商品图片" valuePropName="fileList">
                <Upload

                    listType="picture-circle"
                    className="avatar-uploader"
                    showUploadList={false}

                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                >
                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                </Upload>
            </Form.Item>
            <Form.Item label="商品名称"

            >
                <Input disabled defaultValue={props.cheInfo?.goodsName} />
            </Form.Item>
            <Form.Item label="货号"

            >
                <Input disabled defaultValue={props.cheInfo?.goodsSerNum
                } />
            </Form.Item>
            <Form.Item label="价格"

            >
                <Input disabled defaultValue={props.cheInfo?.goodsPriceRange} />
            </Form.Item>
            <Form.Item label="分类"
            >
                <Input disabled defaultValue={props.cheInfo?.categoryName} />
            </Form.Item>
            <Form.Item label="品牌"
            >
                <Input disabled defaultValue={props.cheInfo?.brandName} />
            </Form.Item>
            <Form.Item label="是否上架">
                <Switch checked={props.cheInfo?.goodsStatus == '4' ? true : false} />
            </Form.Item>
            <Form.Item label="销量"
            >
                <Input disabled defaultValue={props.cheInfo?.goodsSell} />
            </Form.Item>
        </Form>

    </div>
}
